<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
       <h1>render函数使用</h1>
       <!-- sdfa  -->
       <!-- <div @click="run" id="box" ref="box" class="boxone" style="color:red;">
          你好
          <span>世界</span>
          <heade-com></heade-com>
       </div> -->
    
  </div> 
   <script src="./vue.js"> </script>
   <script>
   let headerCom= Vue.component("headerCom",{
      template:`<div>我是头部组件</div>`,
      data(){
        return {}
      }
    })

    let vm=new Vue({
       data(){
        return {
          msg:"hello"
        }
       },
        methods:{
          run   (){
            alert("点击了")
          }
        },
        render:h=>{
          // render 渲染函数 可以渲染虚拟dom和组件
          // h--是createElement的简写
          // render函数渲染虚拟dom
          // h("标签名","属性集合",[子元素集合]或内容)
          // 有些框架 拿render函数来自定义渲染内容
          return h("div",{
            id:"box",
            style:{
              color:"blue"
            },
            key:"166",
            ref:"box",
            on:{ //绑定
              click:this.run
            }
          },["你好",h('span',{class:'myspan'},"世界"),h(headerCom)])
        }
      }).$mount("#app")
      // vm.$on("sendMsg",()=>{})
      // vm.$once和$on  once只监听一次触发
      // vm.$once("sendMsg",(val)=>{

      // })
      // vm.$off("sendMsg")//取消监听触发的自定义事件
   </script>
</body>
</html>